<template>
  <div>
    <div
      class="myMap"
      ref="mapRef"
      :style="{ width: width, height: height }"
      v-if="mode === 'tiled'"
    ></div>
    <template v-else>
      <div style="display: flex; align-items: center">
        <Input :value="value" disabled />
        <Button
          type="primary"
          :disabled="setDisabled"
          @click="handleOpenModal"
          style="margin-left: 12px"
          >选择经纬度</Button
        >
      </div>
      <BasicModal
        @register="registerModal"
        title="经纬度选择"
        width="60%"
        :can-fullscreen="false"
        @ok="handleConfirm"
        @cancel="handleCancel"
      >
        <div class="myMap" ref="mapRef" :style="{ width: width, height: height }"></div>
        <template #centerFooter>
          <Button @click="handleClear">清除</Button>
        </template>
      </BasicModal>
    </template>
  </div>
</template>

<script setup lang="ts">
  import props from './props';
  import { ref, useAttrs, computed } from 'vue';
  import type { Ref } from 'vue';
  import { LineProps, MouseMapPoint, MapMode } from './types';
  import { useMap } from './hooks/index';
  import { isArray } from '/@/utils/is';
  import { Input, Button } from 'ant-design-vue';
  import { useModal, BasicModal } from '/@/components/Modal';
  const attrs = useAttrs();
  // import ICON1 from '/@/assets/images/avatar-icon.png';

  interface MapProps {
    lng?: string | number | undefined;
    lat?: string | number | undefined;
    width?: string;
    height?: string;
    points?: LineProps[];
    mode?: MapMode;
    value?: string;
    //地图指定key
    id?: string;
    disabled?: boolean;
  }

  const mapRef = ref<HTMLDivElement | null>(null);

  const $emit = defineEmits(['change', 'update:value']);

  // props 入参
  const $props = withDefaults(defineProps<MapProps>(), { ...props });

  // 设置初始化点
  const setInitPoints = () => {
    if ($props.value) {
      return $props.value;
    }
    return `${$props.lat},${$props.lng}`;
  };

  const setDisabled = computed(() => {
    return $props.disabled ? $props.disabled : attrs.updateType === 0 ? true : false;
  });

  let markTools: any = null;

  let currentClickPoints = setInitPoints();
  let lastClickPoints = '';

  let isClear = false;

  const [registerModal, { openModal, closeModal }] = useModal();

  // 注册地图
  const { setLineToMap, getMarkToolsMethods, clearOverLays, handleReisterMap } = useMap({
    el: mapRef as Ref<HTMLElement>,
    getCurrentMarkItems: (val) => {
      // 当前手动添加的地图标注的信息
      console.log(`当前手动添加的地图标注的信息-------------`, val);
      currentClickPoints = `${val.currentLnglat.lat},${val.currentLnglat.lng}`;
      markTools.addMarkToolIconExample(val.currentLnglat.lng, val.currentLnglat.lat);
    },
    lat: $props.lat,
    lng: $props.lng,
    level: 18,

    addClick: () => {
      if ($props.mode !== 'modal') return;
      lastClickPoints = currentClickPoints;

      // 地图点击事件
      markTools = getMarkToolsMethods();
      clearOverLays();
      markTools.clearMarkToolIcon();
      markTools.openMarkToolIcon();
      // currentClickLngLat.value = `${val.lnglat.lat},${val.lnglat.lng}`;
      // markTools.addMarkToolIconExample(val.lnglat.lng, val.lnglat.lat);
    },
    points: isArray($props.points) ? $props.points : [],
  });

  const handleOpenModal = () => {
    openModal();
    let obj: any = null;
    const arr = currentClickPoints.split(',');
    if (arr.length === 2) {
      obj = { lat: arr[0], lng: arr[1] };
    } else {
      obj = { lat: $props.lat, lng: $props.lng };
    }
    handleReisterMap(obj);
  };

  // 确定
  const handleConfirm = () => {
    if (!currentClickPoints) {
      if (!isClear) {
        currentClickPoints = `${$props.lat},${$props.lng}`;
      } else {
        isClear = false;
      }
    } else {
      if (isClear) {
        isClear = false;
        currentClickPoints = '';
        lastClickPoints = '';
      }
    }
    $emit('change', currentClickPoints);
    $emit('update:value', currentClickPoints);
    closeModal();
  };

  const handleClear = () => {
    clearOverLays();
    lastClickPoints = currentClickPoints;
    isClear = true;
  };

  const handleCancel = () => {
    isClear = false;
    currentClickPoints = lastClickPoints;
  };

  // 重绘轨迹
  const redrawTrack = (points: LineProps[], lnglat: MouseMapPoint) => {
    setLineToMap(points, lnglat);
  };

  defineExpose({ redrawTrack });
</script>

<style lang="less" scoped>
  .myMap {
    height: 800px;
  }

  :deep(.tdt-control-copyright) {
    display: none;
  }
</style>
